<template>
  <div>
    <div class="templates-box">
      <div class="templates-header">
        <h2 class="templates-title">热门模板</h2>
        <a class="templates-look" href="">查看全部模板>></a>

        <div class="templates-classify">

          <a class="classify-box" href="">
            <div class="templates-back-img templates-img-heart">
            </div>
            <div class="templates-topic">身体健康状况调查</div>
          </a>
          <a class="classify-box" href="">
            <div class="templates-back-img templates-img-society">
            </div>
            <div class="templates-topic">社交网站满意度</div>
          </a>

          <a class="classify-box" href="">
            <div class="templates-back-img templates-img-digital">
            </div>
            <div class="templates-topic">数码家电类产品满意度</div>
          </a>

          <a class="classify-box" href="">
            <div class="templates-back-img templates-img-iq">
            </div>
            <div class="templates-topic">国际标准智商测试</div>
          </a>

          <a class="classify-box" href="">
            <div class="templates-back-img templates-img-group">
            </div>
            <div class="templates-topic">团购网站用户满意度</div>
          </a>

          <a class="classify-box" href="">
            <div class="templates-back-img templates-img-pc">
            </div>
            <div class="templates-topic">PC端游、页游满意度</div>
          </a>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

};
</script>

<style lang="scss" scoped>
.templates-box {
  padding-bottom: 30px;
}
.templates-header{
  max-width: 1000px;
  padding: 0 20px;
  margin: 0 auto;
  position: relative;
}
.templates-title {
  font-size: 20px;
  font-weight: 400;
  margin: 38px 0 28px;
}
.templates-look {
  text-decoration: none;
  color: #58a6e7;
  font-size: 13px;
  position: absolute;
  right: 20px;
  top: 7px;
}
.templates-classify{
  display: flex;
  justify-content: space-between;

}
.classify-box {
  text-decoration: none;

}
.templates-topic {
  margin-top: 13px;
  color: #333;
  font-size: 14px;
  text-align: center;
}
.templates-back-img{
  width: 138px;
  height: 138px;
  background-position: center;

  border: 1px solid #ddd;
  background-color: #fafafa;
  background-repeat: no-repeat;
}
.templates-img-heart {
  background-image: url(../assets/templates-img1.png);
}
.templates-img-society{
  background-image: url('../assets/society2.png');
}
.templates-img-digital{
  background-image: url('../assets/digital2.png');
}
.templates-img-iq {
  background-image: url('../assets/talent-iq.png');
}
.templates-img-group{
  background-image: url('../assets/coffee-group.png');
}
.templates-img-pc {
  background-image: url('../assets/game-pc.png');
}
.classify-box:hover .templates-topic{
  color: #58a6e7;
}
</style>
